<template>
	<view>
		<!-- 加上 autoBack 属性，点击返回按钮会返回上一页 -->
		<u-navbar title="工作臺" safeAreaInsetTop placeholder fixed autoBack>
			<view class="u-nav-slot" slot="right">
				<text class="color_san text_a" v-if="tabsId==1" @click="goAddWork">添加</text>
			</view>
		</u-navbar>
		<u-sticky bgColor="#fff">
			<u-tabs lineColor="#FFB800" :current="tabsId" :scrollable="false" lineWidth="15" :activeStyle="{
			             color: '#000000',
			             fontWeight: 'bold',
			             transform: 'scale(1.05)'
			         }" :inactiveStyle="{
			             color: '#666666',
			             transform: 'scale(1)'
			         }" :list="list1" @change="tabChage"></u-tabs>
		</u-sticky>
		<view class="mainpadding2">
			<template v-if="tabsId==0">
				<view class="flexcenter" v-if="!checkoutList.length">
					<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				</view>
				<view class="mainpadding_top ffffff radius" v-for="(item,index) in checkoutList" :key="index">
					<view class="flexbetween">
						<view class="titletext bold hei_text">{{item.name}}</view>
						<view class="jiebang" v-if="item.childrenList.length" @click="removeWork(item,0,index)"></view>
					</view>
					<template v-if="item.id!=5">
						<view class="bghui mainpadding radius margin_top2" v-if="item.childrenList.length">
							<view class="flexbetween">
								<view class="xiaohei">{{item.childrenList[0].name}}</view>
								<view class="xiaolv" v-if="item.childrenList[0].status==1">正常</view>
								<view class="xiaohong" v-else>過期</view>
							</view>
						</view>
						<view class="bghui mainpadding radius margin_top2 flexbetween" @click="goSelectDa(item.id)"
							v-else>
							<input type="text" class="xiaohui" disabled :placeholder="'添加您的'+item.name">
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</template>
					<template v-if="item.id==5">
						<view class="" v-if="item.childrenList.length>0">
							<view class="bghui mainpadding radius margin_top2" v-for="ite in item.childrenList"
								:key="ite.id">
								<view class="flexbetween">
									<view class="xiaohei">{{ite.name}}</view>
									<view class="xiaolv" v-if="ite.status==1">正常</view>
									<view class="xiaohong" v-else>過期</view>
								</view>
							</view>
						</view>

						<view class="bghui mainpadding radius margin_top2 flexbetween" @click="goSelectDa(item.id)"
							v-else>
							<input type="text" class="xiaohui" disabled :placeholder="'添加您的'+item.name">
							<u-icon name="arrow-right" color="#999" size="16"></u-icon>
						</view>
					</template>
					<view v-show="item.id==1" class="margin_top2 flexbetween">
						<view class="hei_text bold ">出貨二維碼開關</view>
						<u-switch inactiveColor="rgb(230, 230, 230)" v-model="outgoods_status" activeColor="#feb800"
							@change="changeoutgoods(outgoods_status)"></u-switch>
					</view>
				</view>
			</template>
			<template v-if="tabsId==1">
				<view class="mainpadding2s margin_top2 flexbetween radius" v-if="list.data.length" style="background-color: #ffa126;" @click="jumpurl('/pages/workbench/workbenchpx')">
					<view class="xiaobai main_size bold">排序</view>
					<u-icon name="list" color="#fff" size="16"></u-icon>
				</view>
				<view class="flexcenter" v-if="!list.data.length">
					<view class="placeholderimage" style="margin-top: 100rpx;"></view>
				</view>
				<view class="mainpadding_top ffffff radius dingwei" v-for="item in list.data" :key="item.id"
					@click="checkitem(item)">
					<view class="checkfocus" v-if="item.ischeck">
						<u-icon name="checkbox-mark" color="#fff" size="16"></u-icon>
					</view>
					<view class="flexbetween">
						<view class="titletext bold hei_text">{{item.name}}</view>
						<view class="huang_text bold titletext">{{item.tbzz}}
						<text v-show="item.tbzz && item.zd_status==1">/</text><text v-show="item.zd_status==1">轉</text></view>
					</view>
					<view class="pdl" v-if="item.bq_data">
						<view class="bghui mainpadding radius margin_top2 flexbetween ">
							<view class="flexleft">
								<view class="xiaohui">標籤：</view>
								<view class="xiaohei">{{item.bq_data.name}}</view>
							</view>
							<view class="xiaolv" v-if="item.bq_data.status==1">正常</view>
							<view class="xiaohong" v-else>過期</view>
						</view>
					</view>
					<view class="pdl" v-if="item.sj_data">
						<view class="bghui mainpadding radius flexbetween ">
							<view class="flexleft">
								<view class="xiaohui">收據：</view>
								<view class="xiaohei">{{item.sj_data.name}}</view>
							</view>
							<view class="xiaolv" v-if="item.sj_data.status==1">正常</view>
							<view class="xiaohong" v-else>過期</view>
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<view class="xiaohei margin_right1">二維碼完成開關</view>
							<u-switch size="16" inactiveColor="rgb(230, 230, 230)" v-model="item.outgoods_status"
								activeColor="#feb800" @change="changeListoutgoods(item)"></u-switch>
						</view>
						<view class="flexright">
							<view class="flexleft margin_right" @click.stop="editWork(item)">
								<u-icon name="edit-pen" color="#999" size="16"></u-icon>
								<view class="xiaohei">編輯</view>
							</view>
							<view class="flexleft" @click.stop="removeWork(item,1,0)">
								<u-icon name="trash" color="#999" size="16"></u-icon>
								<view class="xiaohei">刪除</view>
							</view>
						</view>

					</view>
				</view>
				<view class="mainpadding posibottom">
					<view class="submitbtn" @click="selectSubmit">確定</view>
				</view>
			</template>
		</view>
		<u-modal :show="show" showCancelButton confirmColor="#ffb800" @cancel="show=false" @confirm="confirm"
			confirmText="確認" cancelText="取消">
			<view class="slot-content color_ling text_weight text">
				{{title}}
			</view>
		</u-modal>
	</view>
</template>

<script>
import HttpRequest from 'uview-ui/libs/luch-request'

	export default {
		data() {
			return {
				show: false,
				title: "",
				list1: [{
						name: "結帳區",
						id: 0,
					},
					{
						name: "工作站",
						id: 1,
					}
				],
				tabsId: 0,
				shop_id: uni.getStorageSync("shop_id"),
				list: {
					data: []
				},
				removeWorkId: "", //刪除的工作站id
				removeWorkIndex: "", //結帳區解绑打印機的索引
				checkoutList: [{
					id: 0,
					name: "發票打印機",
					childrenList: [],
					valid: ""
				}, {
					id: 1,
					name: "收據打印機",
					childrenList: [],
					valid: ""
				}, {
					id: 2,
					name: "標籤印表機",
					childrenList: [],
					valid: ""
				}, {
					id: 3,
					name: "呼叫打印機",
					childrenList: [],
					valid: ""
				}, {
					id: 4,
					name: "預約打印機",
					childrenList: [],
					valid: ""
				}, {
					id: 5,
					name: "語音叫號機",
					childrenList: [],
					valid: ""
				}],
				outgoods_status: false,
				lasttype:0,//1選擇工作臺
				checkList:[]
			}
		},
		onLoad(options) {
			if(options.msg){
				let data = JSON.parse(decodeURIComponent(options.msg));
				this.tabsId = data.type
				this.lasttype = data.type
				this.checkList = data.gzzList
			}
			this.getInfo()
		},
		onShow() {
			uni.$off("selectJzInfo")
			uni.$on("selectJzInfo", (data) => {
				this.addPrint(data.id, data.lastSelectType)
			})
			this.getWorkList()
		},
		methods: {
			selectSubmit(){
				if(this.checkList.length==0){
					HttpRequest.toast("請選擇后操作")
					return false
				}
				uni.$emit("selectWorkId", this.checkList)
				uni.navigateBack(1)
			},
			checkitem(item){
				if(this.lasttype){
					if(!item.ischeck){
						this.checkList.push({
							id:item.id,
							name:item.name,
							tbzz:item.tbzz,
							zd_status:item.zd_status,
						})
						item.ischeck = true
					}else{
						item.ischeck = false
						const index = this.checkList.findIndex(current => current.id === item.id);
						this.checkList.splice(index,1)
					}
				}
			},
			changeListoutgoods(item) {
				this.http.request('/api/shop/editWork', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					outgoods_status: item.outgoods_status ? 1 : 0,
					id: item.id, //工作站id
				}).then(res => {})
			},
			changeoutgoods(outgoods_status) {
				this.http.request('/api/shop/Shopedit', 'POST', {
					shop_id: uni.getStorageSync("shop_id"),
					outgoods_status: outgoods_status ? 1 : 0
				}).then(res => {})
			},
			async getInfo() {
				let res = await this.http.request("/api/shop/Shopdeail", "POST", {
					shop_id: uni.getStorageSync("shop_id"),
				})
				if (res.code == 1) {
					uni.setStorageSync("appkey", res.data.appkey)
					let data = res.data
					this.outgoods_status = data.outgoods_status == 1 ? true : false
					if (data.fp_id && data.fp_shopprinter) {
						this.checkoutList[0].childrenList.push(data.fp_shopprinter)
						this.checkoutList[0].valid = data.fp_id
					}
					if (data.sj_id && data.sj_shopprinter) {
						this.checkoutList[1].childrenList.push(data.sj_shopprinter)
						this.checkoutList[1].valid = data.sj_id
					}
					if (data.bq_id && data.bq_shopprinter) {
						this.checkoutList[2].childrenList.push(data.bq_shopprinter)
						this.checkoutList[2].valid = data.bq_id
					}
					if (data.calldy_id && data.calldy_shopprinter) {
						this.checkoutList[3].childrenList.push(data.calldy_shopprinter)
						this.checkoutList[3].valid = data.calldy_id
					}
					if (data.makedy_id && data.makedy_shopprinter) {
						this.checkoutList[4].childrenList.push(data.makedy_shopprinter)
						this.checkoutList[4].valid = data.makedy_id
					}
					if (data.voicedy_id && data.voicedy_shopprinter.length) {
						this.checkoutList[5].childrenList = data.voicedy_shopprinter
						this.checkoutList[5].valid = data.voicedy_id
					}
					console.log(this.checkoutList,"jjj");
				}
			},
			async addPrint(currentid, val) { //結帳區選擇完打印機添加工作站
				let data = {
					shop_id: this.shop_id,
				}
				if (val == 0) {
					this.$set(data, "fp_id", currentid)
				}
				if (val == 1) {
					this.$set(data, "sj_id", currentid)
				}
				if (val == 2) {
					this.$set(data, "bq_id", currentid)
				}

				if (val == 3) {
					this.$set(data, "calldy_id", currentid)
				}
				if (val == 4) {
					this.$set(data, "makedy_id", currentid)
				}
				if (val == 5) {
					this.$set(data, "voicedy_id", currentid)
				}
				let res = await this.http.request("/api/shop/Shopedit", 'POST', data)
				if (res.code == 1) {
					this.http.toast("綁定成功！")
					this.getInfo()
				} else if (res.code == 0) {
					this.http.toast(res.msg)
				} else {
					this.http.toast('系統處理中，請稍後再試');
				}
			},
			tabChage(e) {
				this.tabsId = e.id
			},
			async getWorkList() { //工作站列表
				let _this = this
				let res = await this.http.request('/api/shop/listWork', 'POST', {
					shop_id: this.shop_id, //店鋪id
					type: 1
				})
				if (res.code == 1) {
					res.data.forEach(item => {
						item.outgoods_status = item.outgoods_status == 1 ? true : false
						this.$set(item, "ischeck", false)
						this.checkList.forEach(current => {
							if (current.id == item.id) {
								item.ischeck = true
							}
						})
					})
					this.list.data = res.data
				}
			},
			goSelectDa(type) { //結帳區添加打印機
				uni.navigateTo({
					url: "/pages/workbench/dayinjgl?selectType=2&type=" + type
				})
			},
			goAddWork() { //添加工作站
				uni.navigateTo({
					url: "./addWork"
				})
			},
			editWork(item) { //编辑工作站
				uni.navigateTo({
					url: "./addWork?id=" + item.id
				})
			},
			removeWork(item, type, index) { //刪除工作站、結帳區解绑打印機
				if (type == 0) {
					this.title = "您確定要解綁打印機嗎？"
					this.removeWorkId = item.valid
					this.removeWorkIndex = index
				} else {
					this.title = "您確定要刪除工作站嗎？"
					this.removeWorkId = item.id
				}
				this.show = true
			},
			async confirm() { //确定刪除
				let text = ""
				if (this.tabsId == 0) {
					let data = {
						shop_id: this.shop_id, //店鋪id
					}
					if (this.removeWorkIndex == 0) {
						this.$set(data, "fp_id", 0)
					}
					if (this.removeWorkIndex == 1) {
						this.$set(data, "sj_id", 0)
					}
					if (this.removeWorkIndex == 2) {
						this.$set(data, "bq_id", 0)
					}
					if (this.removeWorkIndex == 3) {
						this.$set(data, "calldy_id", 0)
					}
					if (this.removeWorkIndex == 4) {
						this.$set(data, "makedy_id", 0)
					}
					if (this.removeWorkIndex == 5) {
						this.$set(data, "voicedy_id", 0)
					}
					let res = await this.http.request('/api/shop/Shopedit', 'POST', data)
					if (res.code == 1) {
						this.http.toast("解綁成功")
						this.checkoutList[this.removeWorkIndex].childrenList = []
					}
				} else {
					let res = await this.http.request('/api/shop/Workdel', 'POST', {
						shop_id: this.shop_id, //店鋪id
						id: this.removeWorkId
					})
					if (res.code == 1) {
						this.http.toast("刪除成功")
						let index = this.list.data.findIndex(item => {
							return this.removeWorkId == item.id
						})
						this.list.data.splice(index, 1)
					}
				}

				this.show = false
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep.u-navbar__content__title {
		font-weight: 800;
	}
</style>